<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import dayjs from 'dayjs'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const titleView = ref('个人考勤月统计')
const currentDate = ref(dayjs())
const collapse = ref(null)
const popup = ref(null)
const rightIcon = () => {
  uni.switchTab({
    url: '/pages/index',
  })
}

// 左切换日期
const leftFilter = () => {
  currentDate.value = currentDate.value.subtract(1, 'month')
}
// 右切换日期
const rightFilter = (flag) => {
  if (!flag) {
    currentDate.value = currentDate.value.add(1, 'month')
  }
}

const monthlyStatisticsData = ref([
  {
    title: '出勤天数',
    rightTitle: '2天',
    children: [
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
    ],
  },
  {
    title: '迟到',
    rightTitle: '1次，共10分钟',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '上班迟到10分钟',
        utilsTxt: '处理',
      },
    ],
  },
  {
    title: '早退',
    rightTitle: '1次，共10分钟',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '上班早退10分钟',
        utilsTxt: '处理',
      },
    ],
  },
  {
    title: '缺卡',
    rightTitle: '1次，共10分钟',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '上班缺卡1次',
        utilsTxt: '处理',
      },
    ],
  },
  {
    title: '外勤',
    rightTitle: '1次',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '外勤1次',
        utilsTxt: '处理',
      },
    ],
  },
  {
    title: '补卡',
    rightTitle: '1次，共10分钟',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '补卡1次',
        utilsTxt: '',
      },
    ],
  },
  {
    title: '请假',
    rightTitle: '1天0小时',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '请假1天',
        utilsTxt: '',
      },
    ],
  },
  {
    title: '加班',
    rightTitle: '1次，共10分钟',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '加班10分钟',
        utilsTxt: '',
      },
    ],
  },
  {
    title: '外出',
    rightTitle: '1天0小时',
    children: [
      {
        date: '2024.12.07 星期五 18：00',
        txt: '外出',
        utilsTxt: '处理',
      },
    ],
  },
  {
    title: '出差',
    rightTitle: '0天',
    children: [
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '',
      },
      {
        date: '2024.12.07 星期五',
        txt: '',
        utilsTxt: '处理',
      },
    ],
  },
])

const application = () => {
  popup.value.open('bottom')
}

const applicationList = ref([
  {
    txt: '补卡申请',
  },
  {
    txt: '请假申请',
  },
  {
    txt: '出差申请',
  },
  {
    txt: '外出申请',
  },
])

const a = () => {
  let params = {}
}
onLoad((props) => {
  currentDate.value = dayjs(props.startDate)
})
</script>

<template>
  <!--  标题-->
  <HeaderNavTabarVue iconFont="icon-cuowuguanbiquxiao" :title="titleView" @rightIcon="rightIcon" />
  <view class="date-filter-box">
    <i class="iconfont icon-left-1" @tap="leftFilter"></i>
    <p class="date-filter">
      <text>{{ currentDate.format('YYYY年MM月') }}</text>
    </p>
    <i
      :class="{
        'iconfont icon-right-1-copy': true,
        active: currentDate == dayjs(),
      }"
      @tap="rightFilter(currentDate == dayjs())"
    ></i>
  </view>
  <view class="collapse-list">
    <uni-collapse ref="collapse">
      <uni-collapse-item
        v-for="(item, index) in monthlyStatisticsData"
        :key="index"
        :name="index"
        :title="item.title"
      >
        <template v-slot:rightContent>
          <view class="rightContentTxt"> {{ item.rightTitle }}</view>
        </template>
        <view class="contentBottom" v-for="(item1, index1) in item.children" :key="index1">
          <view class="left-txt">
            <p>{{ item1.date }}</p>
            <text>{{ item1.txt }}</text>
          </view>
          <view class="right-txt" @tap="application">{{ item1.utilsTxt }}</view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
  <uni-popup ref="popup" background-color="#fff" class="application-popup" borderRadius="10px 10px">
    <view class="application-box">
      <p class="application-list" v-for="(item, index) in applicationList">{{ item.txt }}</p>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
@import '@/static/style/index.scss';

.date-filter-box {
  background: #fff;
  height: 86rpx;
  font-weight: 500;
  @include flex($align: center, $justify: space-evenly);

  .iconfont {
    font-size: 32rpx;
  }

  .active {
    color: #c8d0d9;
  }

  .date-filter {
    color: #1d2129;
    font-size: 30rpx;
    font-style: normal;
    font-weight: 500;
  }
}

.collapse-list {
  margin: 40rpx 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

:deep(.uni-collapse) {
  .rightContentTxt {
    //color: #F53F3F;
    color: #86909c;
  }

  .contentBottom {
    @include flex($align: center, $justify: space-between);
    padding: 0 64rpx;

    &:active {
      background: #f2f3f5;
    }

    .left-txt {
      p {
        color: #1d2129;
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
      }

      text {
        color: #86909c;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
      }
    }

    .right-txt {
      color: #165dff;
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
    }
  }

  .uni-collapse-item__wrap-content {
    border: none;
  }
}

.application-box {
  background: #f2f3f5;
  overflow: hidden;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;

  p {
    height: 108rpx;
    line-height: 108rpx;
    background: #ffffff;
    margin-bottom: 1px;
    text-align: center;

    &:active {
      background: #f2f3f5;
    }
  }
}
</style>
